import React from 'react'
import {Table, Modal, Button, Form, Input} from 'antd';
import {connect} from 'dva';
import SampleChart from '../../component/SampleChart';

const FormItem = Form.Item;
const namespace = "cards";

class List extends React.Component {
    state = {
        visible: false,
        formItemLayout: {
            // lable样式
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            // 输入框样式
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 20},
            },
        },
        statisticVisible: false,
        id: null,
    }
    columns = [
        {
            title: '名称',
            dataIndex: 'name',
        },
        {
            title: '描述',
            dataIndex: 'desc',
        },
        {
            title: '链接',
            dataIndex: 'url',
            render: (value) => {
                return (<a href={value}>{value}</a>)
            }
            // 等效以下render
            // render: value => <a href={value}>{value}</a>,
        },
        {
            title: '操作',
            key: 'action',
            // render: (text, record) => {
            render: (_, {id}) => {
                // 点击事件如果不写成回调函数,会在页面加载的时候就调用
                return (
                    <div>
                        {/*<Button type="danger" onClick={() => this.deleteTableData(record.id)}>删除</Button>*/}
                        <Button type="danger" onClick={() => this.deleteTableData(id)}>删除</Button>
                        <span>　</span>
                        <Button type="primary" onClick={() => this.showStatistic(id)}>图表</Button>
                    </div>
                )
                // return (<Button onClick={this.deleteTableData(record.id)}>删除</Button>)
            }
            // 等效以下render
            // render: value => <a href={value}>{value}</a>,
        },
    ];

    componentDidMount() {
        this.props.dispatch({
            type: `${namespace}/queryList`
        });
    }

    shouModal = () => {
        this.setState({visible: true})
    }
    handleOk = () => {
        const {dispatch, form: {validateFields}} = this.props;
        validateFields((err, values) => {
            if (!err) {
                dispatch({
                    type: `${namespace}/addOne`,
                    payload: values,
                })
                this.setState({visible: false})
            }
        })
    }

    deleteTableData(id) {
        this.props.dispatch({
            type: `${namespace}/deleteOne`,
            payload: id,
        })
    }

    handleStatisticCancel = () => {
        this.setState({statisticVisible: false})
    }

    showStatistic = (id)=>{
        this.props.dispatch({
            type:`${namespace}/getStatistic`,
            payload: id,
        });
        this.setState({id,statisticVisible: true})
    }

    handleCancel = () => {
        this.setState({visible: false})
    }

    render() {
        const {cardsList, cardsLoading, form: {getFieldDecorator}, statistic} = this.props;
        const {visible, formItemLayout, statisticVisible,id} = this.state;
        return (
            <div>
                <Table columns={this.columns} dataSource={cardsList} loading={cardsLoading} rowKey="id"/>
                <button onClick={this.shouModal}>新建</button>
                <Modal
                    title="新建记录"
                    visible={visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Form {...formItemLayout}>
                        {/*
                            getFieldDecorator 是用于将包裹的组件与表单进行双向绑定使用。
                            antd4+ 写法有简化,详情见antd文档
                            https://ant.design/components/form/v3-cn
                        */}
                        <FormItem label={"名称"}>
                            {getFieldDecorator('name', {
                                rules: [{required: true}],
                            })(
                                <Input/>
                            )}
                        </FormItem>
                        <FormItem label={"描述"}>
                            {getFieldDecorator('desc', {
                                rules: [{required: true}],
                            })(
                                <Input/>
                            )}
                        </FormItem>
                        <FormItem label={"链接"}>
                            {getFieldDecorator('url', {
                                rules: [{required: true}]
                            })(
                                <Input/>
                            )}
                        </FormItem>
                    </Form>
                </Modal>
                <Modal visible={statisticVisible} footer={null} onCancel={this.handleStatisticCancel}>
                    <SampleChart data={statistic[id]} />
                </Modal>
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        cardsList: state.cards.cardsList,
        cardsLoading: state.loading.effects['cards/queryList'],
        statistic: state.cards.statistic,
    }
}

// 将页面与表单进行关联
//Form.create()(List) 创建一个高阶组件，为页面组件 List 提供表单所需要的内容(this.props.form)。
// export default connect(mapStateToProps)(List);(antd3+需要)
// form  v3到v4参考:https://ant.design/components/form/v3-cn
export default connect(mapStateToProps)(Form.create()(List));
